<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@include file="link/heat.jsp" %>
<!DOCTYPE html>
<html>


<%--如果增或者失败则提示用户  不会刷新当前页--%>
<script type="text/javascript">
    if ("${message}" != "") {
        alert("${message}")
    }
</script>

<head>
    <meta charset="UTF-8">

    <title></title>
    <link rel="stylesheet" type="text/css"
          href="${pageContext.request.contextPath}/static/easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/wu.css"/>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/icon.css"/>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript"
            src="${pageContext.request.contextPath}/static/easyui/locale/easyui-lang-zh_CN.js"></script>
</head>

<body>


<%--删除提示--%>
<div id="app">


    <table id="dg" title="客户列表" class="easyui-datagrid" style="width:100%;" <%--url="get_users.php"--%>
           toolbar="#toolbar"
           rownumbers="true" fitColumns="true" singleSelect="true">
        <thead>
        <tr>
            <th field="firstname" width="20%">身份证</th>
            <th field="lastname" width="10%">姓名</th>
            <th field="sex" width="10%">性别</th>
            <th field="address" width="20%">地址</th>
            <th field="phone" width="15%">电话</th>
            <th field="job" width="10%">职业</th>
            <th field="action" width="15%">操纵</th>
        </tr>
        </thead>


        <c:if test="${not empty  sessionScope.customerPageInfo}">
            <c:forEach items="${sessionScope.customerPageInfo.list}" var="customer" varStatus="i">
                <tr>
                    <td field="firstname">${customer.customerPid}</td>
                    <td field="lastname">${customer.customerName}</td>
                    <td field="phone">${customer.customerSex}</td>
                    <td field="address">${customer.customerAddress}</td>
                    <td field="phone">${customer.customerPhone}</td>
                    <td field="job">${customer.customerJob}</td>
                    <td>
                        <button name="update" class="easyui-linkbutton" iconCls="icon-edit" plain="true"
                                value="${customer.customerId}"
                                onclick="editCustomer('${customer.customerId}')">修改
                        </button>
                        <a href="${pageContext.request.contextPath}/customer/deleteOne.action?customerId=${customer.customerId}"
                           class="easyui-linkbutton" iconCls="icon-remove" plain="true"
                        >删除</a>
                    </td>
                </tr>
            </c:forEach>
        </c:if>
    </table>
    <div id="toolbar">
        <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newCustomer()">添加客户</a>
    </div>
</div>
<!--
    作者：offline
    时间：2018-03-01
    描述：添加框
-->
<div id="dlg" class="easyui-dialog" style="width:400px;" closed="true" buttons="#dlg-buttons">
    <form id="fm" method="post" novalidate style="margin:0;padding:20px 50px">
        <div style="margin-bottom:10px">
            <input id="identity" name="identity" class="easyui-textbox" required="true" label="身份证:" style="width:100%">
        </div>
        <div style="margin-bottom:10px">
            <input name="custname" id="custname" class="easyui-textbox" data-options="iconCls:'icon-search'"
                   required="true"
                   label="姓名:" style="width:100%">
        </div>
        <div style="margin-bottom:10px">性别 &nbsp;:&nbsp;
            <span class="radioSpan">
                		<input id="sex1" type="radio" name="sex" value="男">男</input>
                <input type="radio" id="sex2" name="sex" value="女">女</input>
           			 </span>
        </div>
        <div style="margin-bottom:10px">
            <input name="address" id="address" class="easyui-textbox" required="true" label="地址:" style="width:100%">
        </div>
        <div style="margin-bottom:10px">
            <input name="phone" id="phone" class="easyui-textbox" required="true" label="电话:" style="width:100%">
        </div>
        <div style="margin-bottom:10px">
            <input name="career" id="career" class="easyui-textbox" required="true" label="职业:" style="width:100%">
        </div>
    </form>
</div>
<div id="dlg-buttons">
    <button class="easyui-linkbutton c6" iconCls="icon-ok" style="width: 90px;" onclick="saveUser()">保存</button>
    <a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">取消</a>
</div>

<!--
    作者：offline
    时间：2018-03-01
    描述：修改框
-->
<div id="dlg2" class="easyui-dialog" style="width:400px;" closed="true" buttons="#dlg-buttons">
    <form id="fm2" method="post" novalidate style="margin:0;padding:20px 50px">
        <input type="hidden" name="custid" id="custid2" value="" class="easyui-textbox"
               data-options="iconCls:'icon-search'"
               required="true"
               style="width:100%">
        <div style="margin-bottom:10px">
            <input id="identity2" name="identity" value="" class="easyui-textbox" required="true" label="身份证:"
                   style="width:100%">
        </div>
        <div style="margin-bottom:10px">
            <input name="custname" id="custname2" value="" class="easyui-textbox" data-options="iconCls:'icon-search'"
                   required="true"
                   label="姓名:" style="width:100%">
        </div>
        <div style="margin-bottom:10px">性别 &nbsp;:&nbsp;
            <span class="radioSpan">
               <input id="sex3" type="radio" name="sex" value="男">男</input>
                <input type="radio" id="sex4" name="sex" value="女">女</input>
         </span>
        </div>
        <div style="margin-bottom:10px">
            <input name="address" id="address2" class="easyui-textbox" value="" required="true" label="地址:"
                   style="width:100%">
        </div>
        <div style="margin-bottom:10px">
            <input name="phone" id="phone2" class="easyui-textbox" value="" required="true" label="电话:"
                   style="width:100%">
        </div>
        <div style="margin-bottom:10px">
            <input name="career" id="career2" class="easyui-textbox" value="" required="true" label="职业:"
                   style="width:100%">
        </div>
    </form>
</div>
<div id="dlg-buttons">
    <button class="easyui-linkbutton c6" iconCls="icon-ok" style="width: 90px;" onclick="updateUser()">保存</button>
    <a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg2').dialog('close')">取消</a>
</div>

<%--分页--%>
<nav aria-label="Page navigation">
    <ul class="pagination">

        <c:if test="${customerPageInfo.hasPreviousPage}">
            <li>
                <a href="${pageContext.request.contextPath}/customer/show.action?pageNum=${customerPageInfo.pageNum-1}"
                   aria-label="Previous" disabled="disabled">
                    <span aria-hidden="true">&laquo;</span>
                </a>
            </li>
        </c:if>
        <c:if test="${ !customerPageInfo.hasPreviousPage}">
            <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
        </c:if>


        <c:if test="${not empty sessionScope.customerPageInfo}">
            <c:forEach begin="1" end="${customerPageInfo.pages}" var="i">
                <c:if test="${customerPageInfo.pageNum==i}">
                    <li class="active">
                        <a href="${pageContext.request.contextPath}/customer/show.action?pageNum=${i}">${i} <span
                                class="sr-only">(current)</span></a>
                    </li>
                </c:if>
                <c:if test="${customerPageInfo.pageNum!=i}">
                    <li><a href="${pageContext.request.contextPath}/customer/show.action?pageNum=${i}">${i}</a></li>
                </c:if>
            </c:forEach>
        </c:if>

        <c:if test="${customerPageInfo.hasNextPage}">
            <li>
                <a href="${pageContext.request.contextPath}/customer/show.action?pageNum=${customerPageInfo.pageNum+1}">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
        </c:if>
        <c:if test="${! customerPageInfo.hasNextPage}">
            <li class="disabled"><a href="#" aria-label="Previous" disabled="disabled"><span
                    aria-hidden="true">&raquo;</span></a></li>
        </c:if>
    </ul>
</nav>


</body>

<script type="text/javascript">

    var url;

    function newCustomer() {

        $('#dlg').dialog('open').dialog('setTitle', '添加客户信息');
        $('#fm').form('clear');
        /* url = 'save_user.php';*/
    }

    //编辑客户信息
    function editCustomer(customerId) {
        // $('#dlg2').dialog('open').dialog('setTitle', '修改客户信息');
        // $('#fm2').form('clear');
        $.ajax({
            url: "${pageContext.request.contextPath}/customer/getOne.action",
            type: "get",
            dataType: "json",
            data: {"customerId": customerId},
            success: function (data) {
                $('#dlg2').dialog('open').dialog('setTitle', '修改客户信息');
                $('#fm2').form('clear');

                $("#custid2").textbox("setValue", data.customerId);
                $("#identity2").textbox("setValue", data.customerPid);
                $("#custname2").textbox("setValue", data.customerName)
                $("#address2").textbox("setValue", data.customerAddress)
                $("#phone2").textbox("setValue", data.customerPhone)
                $("#career2").textbox("setValue", data.customerJob)
                if (data.customerSex == '男') {
                    $("#sex3").attr("checked", "checked");
                } else {
                    $("#sex4").attr("checked", "checked");
                }
            },
            error: function (data) {
                alert("出现错误")
            }
        })

    }

    function updateUser() {
        let cusid = $("#custid2").val();
        let identity = $("#identity2").val();
        let custname = $("#custname2").val();
        let address = $("#address2").val();
        let phone = $("#phone2").val();
        let career = $("#career2").val();
        let sex = "";
        if ($("#sex3").checked) {
            sex = $("#sex3").val();
        } else {
            sex = $("#sex4").val();
        }
        $.ajax({
            url: "${pageContext.request.contextPath}/customer/update.action",
            data: JSON.stringify({
                "customerId": cusid,
                "customerPid": identity, "customerName": custname,
                "customerSex": sex, "customerPhone": phone, "customerAddress": address,
                "customerJob": career
            }),
            type: "post",
            contentType: "application/json;character=utf-8",
            success: function (data) {
                //取消桌面的框
                $('#dlg2').dialog('close');
                window.location.reload();
                /* $("#dg").load("/index.action #dg");*/
                // parent.$("#app").load(window.parent.location.href + "#app")
            },
            error: function (dat) {
                // alert("error")
            }
        })

    }


    // customerId;customerName;customerSex; customerPhone;
    // customerPid; customerJob;customerAddress; customerPhoto;
    //保存客户
    function saveUser() {
        let identity = $("#identity").val();
        let custname = $("#custname").val();
        let sex = null;
        if ($("#sex1").checked) {
            sex = $("#sex1").val();
        } else {
            sex = $("#sex2").val();
        }
        let address = $("#address").val();
        let phone = $("#phone").val();
        let career = $("#career").val();

        $.ajax({
            url: "${pageContext.request.contextPath}/customer/add.action",
            data: JSON.stringify({
                "customerPid": identity, "customerName": custname,
                "customerSex": sex, "customerPhone": phone, "customerAddress": address,
                "customerJob": career
            }),
            type: "post",
            contentType: "application/json;character=utf-8",
            success: function (data) {
                //取消桌面的框
                $('#dlg').dialog('close');
                window.location.reload();
                /* $("#dg").load("/index.action #dg");*/
                // parent.$("#app").load(window.parent.location.href + "#app")
            },
            error: function (dat) {
                // alert("error")
            }
        })
    }


</script>
</html>